<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>报表2</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <div class="wxw_contain">
        <div class="wxw_header"><span>物业数据饼状图</span></div>
        <div class="wxw_remark">
            <table>
                <tr>
                    <td>浏览量占比</br><span>100%</span></td>
                    <td>新访客数</br><span>89</span></td>
                    <td>跳出率</br><span>98.56%</span></td>
                    <td>平均访问时长</br><span>00:01:29</span></td>
                    <td style="border-right:0">平均访问页数</br><span>1.68</span></td>
                </tr>
            </table>
        </div>
        <div id="index2" class="wxw_echart"></div>
        </div>
    <!-- <script src="js/echarts-all.js"></script> -->
     <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>    
     <script type="text/javascript">
       require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 基于准备好的dom，初始化echarts图表
         require(
            [
                'echarts',
                'echarts/chart/bar',
                // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('index2')); 
                
                var option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['水费','电费','管理费','垃圾费','租金','租赁保证金','装修保证金','广告费','其他']
    },
    toolbox: {
        show : true,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['一月','二月','三月','四月','五月','六月','七月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'水费',
            type:'bar',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'电费',
            type:'bar',
            stack: '广告',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'管理费',
            type:'bar',
            stack: '广告',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'垃圾费',
            type:'bar',
            stack: '广告',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'租金',
            type:'bar',
            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine : {
                itemStyle:{
                    normal:{
                        lineStyle:{
                            type: 'dashed'
                        }
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'租赁保证金',
            type:'bar',
            barWidth : 5,
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'装修保证金',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'广告费',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>
</html>